<template>
    <div class="login-backimg">
        <el-form class="login-form-box" ref="formRef" :model="form" label-width="80">
            <el-row>
                <h2 class="login-box_title">登录</h2>
            </el-row>
            <el-row>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="密码" prop="password">
                    <el-input :type="isPassWord ? 'password' : 'text'" v-model="form.password" placeholder="请输入密码">
                        <template #suffix>
                            <el-icon class="el-input__icon" v-if="isPassWord" @click="changePassType">
                                <View />
                            </el-icon>
                            <el-icon class="el-input__icon" v-else @click="changePassType">
                                <Hide />
                            </el-icon>
                        </template></el-input>
                </el-form-item>
            </el-row>
            <el-row justify="space-around">
                <el-link href="https://element-plus.org" target="_blank">忘记密码</el-link>
                <el-button type="success" @click="loginSubmit">登录</el-button>
            </el-row>
        </el-form>
        <div class="logo">阿哲哪会写系统</div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { View, Hide } from '@element-plus/icons-vue'
import type { userLoginInfo } from '@/types/user';
import { login } from '@/api/login';
import { setLocaleStorage } from '@/utils';
import router from '@/router';
import { useUserStore } from '@/store/userState';
const userStore = useUserStore()
const form = reactive<userLoginInfo>({
    username: '',
    password: ''
})
let isPassWord = ref<boolean>(true)

const changePassType = () => {
    isPassWord.value = !isPassWord.value
}
const loginSubmit = () => {
    login(form).then(res => {
        setLocaleStorage('token', res.data.token)
        userStore.setToken(res.data.token)
        userStore.setAuthenticated(true)
        router.replace('./')
    }).catch(err => {

    })
}
</script>
<style lang="scss" scoped>
.login-backimg {
    background-image: url('@/assets/images/loginBackground.png');
    background-size: 100% 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-form-box {
        width: 320px;
        background-color: #fff;
        border-radius: 4px;
        padding: 16px;

        .login-box_title {
            width: 100%;
            text-align: center;
            color: #000;
        }

        :deep(.el-form-item) {
            width: 100%;
        }
    }

    .logo {
        position: absolute;
        bottom: 2%;
        right: 2%;
        font-size: 3em;
    }
}
</style>